<template>
  <div>
    <div class="container">
      <!-- 导航栏 -->
      <van-nav-bar title="账号资料" left-arrow @click-left="onClickLeft" />
      <div>
        <div class="img">
          <van-image
            class="imagee"
            round
            width="10rem"
            height="10rem"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
        </div>
        <van-cell title="姓名" is-link value="蒋先生" />
        <van-cell title="昵称" is-link value="淘七888888" />
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="性别"
          placeholder="选择性别"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirmm"
          />
        </van-popup>

        <van-cell
          title="生日"
          is-link
          :value="date"
          @click="show = true"
        ></van-cell>
        <van-calendar v-model:show="show" @confirm="onConfirm" />
        <van-cell
          title="简介"
          is-link
          class="briefIntro line-1"
          value="我是购物达人，喜欢3C电子数码产品的一切商品。"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import '@/assets/css/reset.css'
import '@/assets/css/base.css'
import { onMounted, ref, reactive } from 'vue'
// 导航栏
const onClickLeft = () => history.back()
// 性别单选
const columns = [
  { text: '男', value: 'nan' },
  { text: '女', value: 'nv' },
]
const fieldValue = ref('')
const showPicker = ref(false)

const onConfirmm = ({ selectedOptions }) => {
  showPicker.value = false
  fieldValue.value = selectedOptions[0].text
}

// 生日
const checkeds = ref('1')
const date = ref('')
const show = ref(false)

const formatDate = date =>
  `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
const onConfirm = value => {
  show.value = false
  date.value = formatDate(value)
}

// 开关
const checked = ref(true)
</script>

<style lang="scss" scoped>
.container {
  background-color: var(--color-grey-three);
  --van-nav-bar-background: var(--color-primary);
  --van-nav-bar-text-color: var(--color-white);

  .van-cell:after {
    border-bottom: 0;
  }

  .img {
    position: relative;
    height: 200px;

    .imagee {
      position: absolute;
      top: 50%;
      margin-top: -80px;
      left: 50%;
      margin-left: -80px;
    }
  }
  :deep(.van-field__control) {
    color: var(--van-cell-value-color);
    text-align: right;
  }

  .briefIntro {
  }
}
</style>
